現代有很多前端框架舉凡Angular、Vue、React，我選擇Vue
Vue和Angular類似，都可以達到資料分離、全部畫面同步更動等效果，那像是Angular比較偏向前後端一起做，功能完善但寫起來也比較麻煩，加上Vue比較輕量，相信你可以更快得到的feedback
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue's World</title>
</head>
<body>
<p>Let's Start!</p>
</body>
</html>
{{ }}寫程式能懶即懶，所以直接用*CDN做import就好，省時省力
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//此為開發者version，包含console warnings.
?CDN(Content delivery network)：
中文名為內容傳遞網路，那直接從這個詞去聯想=>將內容在網路上傳輸的快取機制。
換句話說，連上一個網站等同連上這個網站所在Server，因此不用重新向伺服器Request，那Sever架在哪裡都不會影響用戶讀取網站的速度，像是Vue, Jquery, Bootstrap等都有使用CDN服務，User就可以依佈有CDN最近國家存取，補充 : https://zh.wikipedia.org/wiki/%E5%85%A7%E5%AE%B9%E5%82%B3%E9%81%9E%E7%B6%B2%E8%B7%AF
建立一個最簡單的網站，帶有id設為dayo的div，這div等等會以Vue的方式操作
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta charset="UTF-8">
<title>Hello Vue's World</title>
</head>
<body>
<div id="dayo"></div>
</body>
</html>
接著，我們在dayo裡面寫點內容(content)
<div id="dayo">{{content}}</div>
然後我們將這個message代換為Hello Vue
<script>
var vm = new Vue({
el: '#dayo',
data: {
content: 'Hello Vue!'
}
})
</script>
所以可以想像的現在的網頁變成
<div id="dayo">Hello Vue!</div>
就會出現一個網頁寫Hello Vue囉!
我們可以在這短短的幾行code得知
[]我們先增加一個why，裡面放這次的參加原因，那我的原因有很多 - 好玩、有趣、和大家分享
data: {
content: "Hello Vue!",
why:["好玩","有趣","和大家分享"]
}
接著，我們將剛剛定義好的why動態更新至我們的HTML，這邊矩陣使用的方式一樣，用中括號[]、index從0開始
<div id="dayo">
{{content}}
<p>為甚麼參加IT邦? {{why[0]}}</p>
<p>參加可以幹嘛? {{why[2]}}</p>
</div>
我們的結果就出來囉，是不是很簡單呢，那我們繼續看下去...
v-for 我們的data一樣
data: {
content: "Hello Vue!",
why:["好玩","有趣","和大家分享"]
}
但是這次我們的HTML內要改放v-for，他的使用方法是 a in b，b是我們原本在data裡開的array，那a就是index去run這個array，寫法如下：
<div id="dayo">{{content}}
<p>為甚麼參加IT邦?</p>
<ul>
<li v-for="reasons in why">{{reasons}}</li>
</div>
可想而知，這個for在網頁上會解析成
<ul>
<li>好玩</li>
<li>有趣</li>
<li>和大家分享</li>
</ul>
如圖
這種方法是不是很方便呢，再多的資料都能用for完成
那今天我們先到這邊，消化一下，Vue還有很多功能，讓我們一天一天來練習
{{}}
iThome鐵人賽
看影片追技術